<template>
  <view class="app-container">
    <uni-card title="协议基础" isShadow>
      <view class="info-row"><text class="label">协议编码</text><text class="value">{{ detail.frameworkCode }}</text></view>
      <view class="info-row"><text class="label">协议名称</text><text class="value">{{ detail.frameworkName }}</text></view>
      <view class="info-row"><text class="label">状态</text><uni-tag :text="formatStatus(detail.status)"
          :type="getStatusType(detail.status)" /></view>
      <view class="info-row"><text class="label">生效时间</text><text class="value">{{ formatDate(detail.effectiveTime)
          }}</text></view>
      <view class="info-row"><text class="label">到期时间</text><text class="value">{{ formatDate(detail.expireTime)
          }}</text></view>
    </uni-card>

    <uni-card title="公司/部门信息" isShadow>
      <view class="info-row"><text class="label">收货公司</text><text class="value">{{ detail.receiverCompanyName }}</text>
      </view>
      <view class="info-row"><text class="label">发货公司</text><text class="value">{{ detail.senderCompanyName }}</text>
      </view>
      <view class="info-row"><text class="label">需求计划部门</text><text class="value">{{ detail.receiverDeptName }}</text>
      </view>
      <view class="info-row"><text class="label">发货计划部门</text><text class="value">{{ detail.senderDeptName }}</text>
      </view>
      <view class="info-row"><text class="label">收货仓库</text><text class="value">{{ detail.receiverWarehouseName
          }}</text></view>
      <view class="info-row"><text class="label">发货仓库</text><text class="value">{{ detail.senderWarehouseName }}</text>
      </view>
    </uni-card>

    <uni-card title="联系人信息" isShadow>
      <view class="info-row"><text class="label">收货联系人</text><text class="value">{{ detail.receiverContact }}</text>
      </view>
      <view class="info-row"><text class="label">收货联系电话</text><text class="value">{{ detail.receiverPhone }}</text>
      </view>
      <view class="info-row"><text class="label">发货联系人</text><text class="value">{{ detail.senderContact }}</text>
      </view>
      <view class="info-row"><text class="label">发货联系电话</text><text class="value">{{ detail.senderPhone }}</text></view>
    </uni-card>

    <uni-card title="业务配置" isShadow>
      <view class="info-row"><text class="label">协议需要确认</text><text class="value">{{
        yesNo(detail.needSenderConfirmFramework) }}</text></view>
      <view class="info-row"><text class="label">看板需要确认</text><text class="value">{{
        yesNo(detail.needSenderConfirmKanban) }}</text></view>
      <view class="info-row"><text class="label">看板做送货单</text><text class="value">{{ yesNo(detail.deliveryAsReceipt)
      }}</text></view>
      <view class="info-row"><text class="label">收货扫码要求</text><text class="value">{{
        scanReqText(detail.scanRequirement) }}</text></view>
      <view class="info-row"><text class="label">要货提前期</text><text class="value">{{ detail.leadTimeHours }}小时</text>
      </view>
      <view class="info-row"><text class="label">打印机</text><text class="value">{{ detail.printerName ||
        detail.printerId }}</text></view>
      <view class="info-row"><text class="label">箱标模板</text><text class="value">{{ detail.boxLabelTemplate }}</text>
      </view>
      <view class="info-row"><text class="label">看板模板</text><text class="value">{{ detail.kanbanTemplate }}</text>
      </view>
    </uni-card>

    <uni-card title="物料清单" isShadow>
      <view class="materials-cards">
        <uni-card v-for="(m, idx) in (detail.materials || [])" :key="idx" isShadow>
          <view class="info-row"><text class="label">物料编码</text><text class="value">{{ m.materialCode }}</text></view>
          <view class="info-row"><text class="label">物料名称</text><text class="value">{{ m.materialName }}</text></view>
          <view class="info-row"><text class="label">单位</text><text class="value">{{ m.materialUnit }}</text></view>
          <view class="info-row"><text class="label">不含税单价</text><text class="value">{{ formatPrice(m.unitPrice)
              }}</text></view>
          <view class="info-row"><text class="label">税率</text><text class="value">{{ m.taxRate }}%</text></view>
          <view class="info-row"><text class="label">包装型号</text><text class="value">{{ m.packageType }}</text></view>
          <view class="info-row"><text class="label">包装容量</text><text class="value">{{ m.packageCapacity }}</text>
          </view>
          <view class="info-row"><text class="label">最小订货批量</text><text class="value">{{ m.minOrderQty }}</text></view>
        </uni-card>
        <view v-if="!detail.materials || detail.materials.length === 0" class="empty">暂无物料</view>
      </view>
    </uni-card>

    <view class="ops-container">
      <button class="btn confirm" :disabled="!canConfirm" @click="onConfirm">确认</button>
      <button class="btn void" :disabled="!canVoid" @click="onVoid">作废</button>
    </view>
  </view>
</template>

<script>
import { getSupplyFramework, updateSupplyFramework } from '@/api/kanban/supplyFramework'

export default {
  name: 'SupplyFrameworkDetail',
  data () {
    return {
      id: undefined,
      detail: {},
      loading: false
    }
  },
  computed: {
    canConfirm () {
      return String(this.detail.status) === '20' // 待确认
    },
    canVoid () {
      return String(this.detail.status) !== '-10' // 非作废
    }
  },
  onLoad (options) {
    this.id = options.id
    this.fetchDetail()
  },
  methods: {
    fetchDetail () {
      this.loading = true
      getSupplyFramework(this.id).then(res => {
        this.detail = res.data || {}
      }).finally(() => {
        this.loading = false
      })
    },
    onConfirm () {
      uni.showModal({
        title: '确认协议',
        content: '确认通过该协议并设置为生效状态？',
        success: (r) => {
          if (r.confirm) {
            const payload = { id: this.detail.id, status: '0' } // 生效
            updateSupplyFramework(payload).then(() => {
              uni.showToast({ title: '已确认生效', icon: 'success' })
              this.fetchDetail()
            })
          }
        }
      })
    },
    onVoid () {
      uni.showModal({
        title: '作废协议',
        content: '作废后不可恢复，确认作废吗？',
        success: (r) => {
          if (r.confirm) {
            const payload = { id: this.detail.id, status: '-10' } // 已作废
            updateSupplyFramework(payload).then(() => {
              uni.showToast({ title: '已作废', icon: 'success' })
              this.fetchDetail()
            })
          }
        }
      })
    },
    formatStatus (status) {
      const map = { '0': '生效', '10': '草稿', '20': '待确认', '-10': '已作废', '-20': '已过期' }
      return map[String(status)] || ''
    },
    getStatusType (status) {
      const map = { '0': 'success', '10': 'default', '20': 'warning', '-10': 'error', '-20': 'info' }
      return map[String(status)] || 'default'
    },
    yesNo (v) { return v ? '是' : '否' },
    scanReqText (v) {
      const map = { 'must': '必须扫码', 'suggest': '建议扫码', 'none': '不要求' }
      return map[v] || v
    },
    formatDate (v) {
      if (!v) return ''
      try {
        const d = new Date(v)
        const y = d.getFullYear(), m = String(d.getMonth() + 1).padStart(2, '0'), dd = String(d.getDate()).padStart(2, '0')
        return `${y}-${m}-${dd}`
      } catch (e) { return v }
    },
    formatPrice (v) {
      if (v === undefined || v === null) return ''
      return Number(v).toFixed(4)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding-bottom: 70px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.label {
  width: 170rpx;
  color: #666;
  font-size: 14px;
  //margin-right: 5rpx;
}

.value {
  flex: 1;
  color: #333;
  font-size: 14px;
}

.materials {
  width: 100%;
}

.materials-header,
.materials-row {
  display: flex;
  padding: 8px 0;
}

.materials-header {
  border-bottom: 1px solid #eee;
  color: #999;
  font-size: 12px;
}

.materials-row {
  border-bottom: 1px dashed #f0f0f0;
  font-size: 12px;
  color: #333;
}

.col {
  flex: 1;
}

.code {
  flex: 1.2;
}

.name {
  flex: 1.5;
}

.unit,
.price,
.tax,
.pkg,
.cap,
.min {
  flex: 1;
}

.empty {
  text-align: center;
  color: #999;
  padding: 12px 0;
}

.ops-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 10px;
  background: #fff;
  border-top: 1px solid #eee;
}

.btn {
  flex: 1;
  margin: 0 6px;
}

.confirm {
  background: #4cd964;
  color: #fff;
}

.void {
  background: #ff3b30;
  color: #fff;
}
</style>